<template>
	<uv-tabbar :value="tabbarIndex" :fixed="true"  @change="change">
		<uv-tabbar-item :text="item.text" :icon="item.icon" v-for="item in tabbarList">{{ index }}</uv-tabbar-item>
	</uv-tabbar>
</template>
<script setup lang="ts">
import { ref , defineProps , withDefaults} from 'vue'
interface Props {
  index: number,
}
const props = withDefaults(defineProps<Props>(), {
    index: 0
})

const tabbarIndex = ref<any>(props.index * 1)

const tabbarList = [
    {text:'首页',pageUrl:'/pages/index/index',icon:'photo'},
    {text:'里程碑',pageUrl:'/pages/milestones/index',icon:'play-right'},
    {text:'我的',pageUrl:'/pages/mine/index',icon:'account'},
]
const change = (index : any) => {
    // tabbarIndex.value = index
    uni.switchTab({
        url: tabbarList[index].pageUrl
    });
}
</script>
<style scoped>
	.icon {
		width: 36rpx;
		height: 36rpx;
	}
</style>